<template>
  <f-form
    class="form-box"
    :model="formStateList"
    :rules="rules"
    name="basic"
    autocomplete="off"
    labelAlign="right"
  >
    <f-form-item label="固定床位费" name="meditemId">
      <f-input size="default" allowClear v-model:value="formStateList.meditemId" placeholder="请输入" :disabled="true"/>
    </f-form-item>
    <f-form-item label="地址" name="address">
      <f-baidu-search
        v-model="formStateList.address"
        input-id="suggestId"
        :allowMap="true"
        :allowClear="true"
        :disabled="false"
        :size="size"
        :bordered="true"
        :mapClass="mapClass"
        :styleList="[style1, style2]"
        @change="change"
        @getResult="getResult"
        @getAllInfo="getAllData"
      />
    </f-form-item>
    <f-form-item label="固定床位费" name="meditemId">
      <f-input size="default" allowClear v-model:value="formStateList.meditemId" placeholder="请输入" />
    </f-form-item>
    <f-form-item label="固定床位费" name="meditemId">
      <f-input size="default" allowClear v-model:value="formStateList.meditemId" placeholder="请输入" />
    </f-form-item>
    <f-form-item label="固定床位费" name="meditemId">
      <f-input size="default" allowClear v-model:value="formStateList.meditemId" placeholder="请输入" />
    </f-form-item>
    <f-form-item label="固定床位费" name="meditemId">
      <f-input size="default" allowClear v-model:value="formStateList.meditemId" placeholder="请输入" />
    </f-form-item>
  </f-form>
</template>
<script setup>
import { ref } from "vue";
const size = ref("middle");

const style1 = ref({});
const style2 = ref({
  "margin-bottom": "20px",
});

const mapClass = ref(["w600","h400"]);

const change = (val) => {
  console.log(val, "change");
};

const formStateList = ref({
  address: "",
});
const rules = {
  meditemId: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
  ],
  address: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
  ],
};

const getResult = (r) => {
  console.log(r);
};

function getAllData({ data }) {
  console.log("--------", data);
}


</script>
<style lang="scss" scoped>
//::v-deep(.mapClass ){
//  height: 700px;
//  width: 700px;
//}

.ant-col-5 {
  max-width: 20%;
}

.prompt {
  color: #ff8484;
}
</style>
